<template>
	<view style="height: 100vh; display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 卡片 -->
		<view class="card">
			<view style="width: 702rpx;height: 180rpx; background-color: #FFFFFF;display: flex;justify-content: space-around;align-items: center;">
				<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<text style="font-size: 36rpx;color: #3187FB;">{{ data.user_number ? data.user_number : 0 }}</text>
					<text style="font-size: 28rpx;color: #999999;">用户总数</text>
				</view>
				<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<text style="font-size: 36rpx;color: #3187FB;">{{ data.user_apply ? data.user_apply : 0 }}</text>
					<text style="font-size: 28rpx;color: #999999;">报名人数</text>
				</view>
			</view>
		</view>

		<!-- 筛选 -->
		<view style="width: 702rpx;height: 100rpx; display: flex;justify-content: space-around;">
			<!-- 意愿筛选 -->
			<view style="display: flex;justify-content: center;align-items: center;">
				<picker @change="bindPickerChange1" :value="desireIndex" :range="desireList" style="line-height: 1;">
					<view style="font-size: 32rpx;color: #4D4D4D;line-height: 1;">{{ desireList[desireIndex] }}</view>
				</picker>
				<image mode="aspectFill" src="../static/xiaoshou/shaixuan.png" style="width: 30rpx;height: 16rpx;margin-left: 19rpx; vertical-align: middle;"></image>
			</view>
			<!-- 报名状态筛选 -->
			<view style="display: flex;justify-content: center;align-items: center;">
				<picker @change="bindPickerChange" :value="signUpIndex" :range="signUpList">
					<view style="font-size: 32rpx;color: #4D4D4D;line-height: 1;">{{ signUpList[signUpIndex] }}</view>
				</picker>
				<image mode="aspectFill" src="../static/xiaoshou/shaixuan.png" style="width: 30rpx;height: 16rpx;margin-left: 19rpx; vertical-align: middle;"></image>
			</view>
			<!-- 跟进时间排序 -->
			<view style="display: flex;justify-content: center;align-items: center;" @click="tmFlg">
				<text style="font-size: 32rpx;color: #4D4D4D;line-height: 1;">跟进时间</text>
				<image mode="aspectFill" v-if="showTime" src="../static/xiaoshou/paixu.png" style="width: 22rpx;height: 28rpx;margin-left: 19rpx; vertical-align: middle;"></image>
				<image mode="aspectFill" v-else src="../static/xia.png" style="width: 22rpx;height: 28rpx;margin-left: 19rpx; vertical-align: middle;"></image>
			</view>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>
		<!-- 用户列表 -->
		<scroll-view
			:enable-flex="true"
			:show-scrollbar="false"
			@scrolltolower="lower"
			:scroll-y="true"
			style="width: 702rpx;height: 170rpx; margin-top: 30rpx; display: flex;flex-direction: column; align-items: center;flex: auto;flex-basis: 50vh;"
		>
			<!-- item -->

			<view style="width: 100%;margin-bottom: 60rpx;" v-for="(item, index) in list" :key="index" @click="jump(item)">
				<!-- 用户信息 -->
				<view style="width: 100%;height: 100%; display: flex;justify-content: space-between;align-items: center;">
					<view style="height: 100%; display: flex;align-items: center;">
						<!-- 头像 -->
						<image mode="aspectFill" :src="item.avatar" style="width: 122rpx;height: 122rpx;"></image>
						<!-- 基本信息 -->
						<view
							style="height: 100%; display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;margin-left: 20rpx;
						font-size: 26rpx;color: #666666;"
						>
							<view style="display: flex; align-items: center;">
								<text style="font-size: 32rpx;color: #333333; width: 180rpx;display: block; display: flex; justify-content: flex-start;" class="hidden">
									{{ item.user_nickname ? item.user_nickname : '' }}
								</text>
								<text style="font-size: 22rpx;color: #F96A15;margin-left: 10rpx;">{{ item.wish }}</text>
							</view>
							<view>
								<text>跟进：</text>
								<text>{{ item.update_time }}</text>
							</view>
							<view>
								<text>备注：</text>
								<text>{{ item.update_note ? item.update_note : '暂无备注' }}</text>
							</view>
						</view>
					</view>
					<!-- 手机号和报名状态 -->
					<view style="height: 100%; display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;">
						<view style="display: flex;align-items: center;">
							<image mode="aspectFill" src="../static/xiaoshou/phone.png" style="width: 18rpx;height: 26rpx;margin-right: 8rpx;"></image>
							<text style="font-size: 24rpx;color: #666666;">{{ item.mobile ? item.mobile : '暂无手机号码' }}</text>
						</view>
						<text style="font-size: 26rpx;color: #F96A15;">{{ item.apply }}</text>
					</view>
				</view>
				<!-- 分割线 -->
				<view style="width: 100%;height: 10rpx;background-color: #F7F8FF;margin-top: 29rpx;"></view>
			</view>

			<xw-empty :isShow="emptyShow" text="暂无相关数据" textColor="#777777"></xw-empty>
		</scroll-view>
	</view>
</template>

<script>
import xwEmpty from '@/components/xw-empty/xw-empty';
export default {
	components: { xwEmpty },
	data() {
		return {
			cpyData: {},
			data: {},
			list: [],
			emptyShow: false,

			page: 1,
			limit: 10,
			userList: [, , , , , , , ,],
			desireList: ['有无意向', '无意愿', '有意愿'],
			desireIndex: 0,
			signUpList: ['更进状态', '未报名', '已报名'],
			signUpIndex: 0,
			showTime: true,
			time: 0,
			wish: -1,
			apply: -1,
		};
	},
	onShow(e) {
		console.log('9999999999999999999999999 :>> ', 9999999999999999999999999);
		this.getData();
	},
	methods: {
		jump(item) {
			uni.navigateTo({
				url: 'genjin?id=' + item.id,
			});
		},
		tmFlg() {
			this.page = 1;
			this.showTime = !this.showTime;
			if (this.time == 1) {
				this.time = 0;
				this.getData(1);
			} else {
				this.time = 1;
				this.getData(1);
			}
		},
		// 改变意愿筛选
		bindPickerChange(e) {
			this.list.length = 0;
			this.page = 1;
			if (e.target.value == 0) {
				this.apply = -1;
				this.getData();
			}
			if (e.target.value == 1) {
				this.apply = 0;
				this.getData();
			}
			if (e.target.value == 2) {
				this.apply = 1;
				this.getData();
			}
		},
		bindPickerChange1(e) {
			this.list.length = 0;
			this.page = 1;
			if (e.target.value == 0) {
				this.wish = -1;
				this.getData();
			}
			if (e.target.value == 1) {
				this.wish = 0;
				this.getData();
			}
			if (e.target.value == 2) {
				this.wish = 1;
				this.getData();
			}
		},
		// 滑动到页面底部触发
		lower() {
			this.getData();
		},
		//教练销售
		async getData(e) {
			let res;
			try {
				res = await this.$request.post('api/User/user_coach', {
					data: {
						uid: uni.getStorageSync('id'),
						page: this.page,
						limit: this.limit,
						time: this.time, //  0正序 1倒序
						wish: this.wish, //   0无意向 1有意向
						apply: this.apply, //  0未报名 1已报名
					},
				});

				//uni.$showMsg(res.data.msg);

				if (res.data.code == 1) {
					this.data = res.data.data;
					if (e == 1) {
						this.list = res.data.data.list;
					} else {
						this.list = [...this.list, ...res.data.data.list];

						this.page += 1;
					}
				}
				this.list.length == 0 && (this.emptyShow = true);
				// this.list = [...this.list, ...res.data.data.list];

				//this.page++;
				//res.data.data.list == [] && (this.emptyShow = true);
			} catch (e) {
				//TODO handle the exception111111111111
				//this.emptyShow = true;
				// return uni.showToast({
				// 	title: '网络连接失败！',
				// 	icon: 'none'
				// });
			}
		},
	},
};
</script>

<style>
/* page{
		background-color: #3187FB;
	} */
.hidden {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all linear 0.2s;
}
.card {
	width: 100%;
	height: 236rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3187fb+50,ffffff+50 */
	background: rgb(49, 135, 251);
	/* Old browsers */
	background: -moz-linear-gradient(top, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3187fb', endColorstr='#ffffff', GradientType=0);
	/* IE6-9 */
}
</style>
